<template>
	<div>
		<a-button type="primary" size="large" @click="openAduitModal" style="margin-bottom: 8px"
			v-if="(getStorageRole() === 3)">
			待审核列表
		</a-button>
		<a-modal v-model:visible="visible" title="申请店铺管理员列表" okText="完成" cancelText="取消" @ok="handleOk">
			<a-table bordered size="small" :data-source="aduitDataSource" :columns="aduitColumns" ellipsis=true>
				<template #operation="{ record }">
					<a-space>
						<a-popconfirm title="是否确定通过？通过后无法修改" ok-text="是" cancel-text="否" @confirm="toAduit(record.id, 1)">
							<a-button type="primary" size="small">通过</a-button>
						</a-popconfirm>
						<a-popconfirm title="是否确定驳回？驳回后无法修改" ok-text="是" cancel-text="否" @confirm="toAduit(record.id, -1)">
							<a-button danger size="small">驳回</a-button>
						</a-popconfirm>
					</a-space>
				</template>
			</a-table>
		</a-modal>
	</div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { getUserList, aduitSuperAdmin } from '../../service/api/user';
import { getStorageRole } from '../../utils/index';

const aduitDataSource = ref([]);

const aduitColumns = [
	{
		title: '用户名',
		dataIndex: 'username',
	},
	{
		title: '所在店铺 id',
		dataIndex: 'shop_id',
	},
	{
		title: '是否通过审核',
		dataIndex: 'operation',
		align: "center",
		slots: {
			customRender: 'operation',
		},
	},
];


const useHttpRequestEffect = () => {
	const getAduitUserListRequest = async () => {
		const res = await getUserList({ is_visit: 1 });
		aduitDataSource.value = res?.data;
	}
	const aduitSuperAdminRequest = async (id, status) => {
		const res = await aduitSuperAdmin(id, status);
		if (res?.data?.res) {
			message.success("成功")
			aduitDataSource.value = aduitDataSource.value.filter(item => item.id !== id);
		} else {
			message.error("请重试")
		}
	}
	return { getAduitUserListRequest, aduitSuperAdminRequest }
}

export default defineComponent({
	setup() {
		const visible = ref(false);
		const { getAduitUserListRequest, aduitSuperAdminRequest } = useHttpRequestEffect();
		const openAduitModal = () => {
			visible.value = true;
		}
		const toAduit = (id, status) => {
			aduitSuperAdminRequest(id, status);
		}
		const handleOk = () => {
			visible.value = false;
		}

		onMounted(async () => {
			await getAduitUserListRequest();
		})
		return { visible, aduitColumns, aduitDataSource, openAduitModal, toAduit, handleOk, getStorageRole };
	}
});
</script>

<style>

</style>